<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://qzone.qq.com/1110/page" prefix="w"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="css/details.css?id=<%=new Date().getTime()%>" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function() {
		var bigpeakCount =0;
		$(".bigSpeak").each(function(){
			bigpeakCount++;
		})
		$(".card_style_one").empty();
		/* qqq(0); */
		//
		$("#jia").click(function() {
			var num = parseInt($("#num").val());
			if (num > 50) {
				$("#num").val("50");
				return;
			}
			if (num < 50) {

				$("#num").val(num + 1);

			} else {
				alert("库存不足")
			}
		})
		//
		$("#jian").click(function() {
			var num = parseInt($("#num").val());
			if (num == 0) {
				$("#num").val("1");
				return;
			}
			if (num > 1) {
				$("#num").val(num - 1);
			} else {
				alert("该商品最少买一件")
			}
		})
		//
		$(".details-img1:eq(0)").css("display", "block");
		$(".details-img2:eq(0)").css("border", "1px solid #b4a078");
		//
		$(".details-img2").mouseover(
				function() {
					var index = $(".details-img2").index(this);
					$(this).css("border", "1px solid #b4a078");
					$(".details-img2").eq(index).siblings().css("border",
							"1px solid #e8e8e8")
					$(".details-img1").eq(index).css("display", "block");

					$(".details-img1").eq(index).siblings().css("display",
							"none")
					var p = $(".details-img2:eq(" + index + ") img")
							.attr("src");
					$(".img5").eq(index).attr("src", p)
				})
		//
		$(".details-img3").click(function() {
					var index = $(".details-img3").index(this);
					$(this).css("border", "1px solid #b4a078");
					$(".details-img3").eq(index).siblings().css("border",
							"1px solid #e8e8e8");
					var s = $(".img4").eq(index).attr("src");
					$(".img5").attr("src", s);
					$("#cart_img").val(s);

		})
		//
			$(".typeg").click(function(){
				var s =$(this).html();
				var ss=$("#carttypega").val(s)
			})
				//	
				$(".detailsComment2:eq(1)").css("display","none");
					$(".detailsComment1:eq(0)").css("background-color","white");
				var ping = "${pinglun}";
				if(ping != ""){
					$(".detailsComment2:eq(1)").css("display","block");
					$(".detailsComment2:eq(0)").css("display","none");
					$(".detailsComment1:eq(1)").css({"background-color":"white"});
					$(".detailsComment1:eq(0)").css({"background-color":"#F4F4F4"});
					
				}
			
				
				$(".typeg").click(function(){
					var tpindex = $(".typeg").index(this);
					$(".typeg:eq("+tpindex+")").css("border","1px solid #9d8863");
					$(".typeg:eq("+tpindex+")").siblings().css("border","1px solid #d8d8d8");
					
				})
				
			
				$(".detailsComment1").click(function(){
					var detcommindex = $(".detailsComment1").index(this);
					$(".detailsComment2:eq("+detcommindex+")").css({"display":"block"});
					$(".detailsComment2:eq("+detcommindex+")").siblings().css({"display":"none"});
					$(".detailsComment1:eq("+detcommindex+")").css({"background-color":"white"});
					$(".detailsComment1:eq("+detcommindex+")").siblings().css({"background-color":"#F4F4F4"});
				})
				$("#allspeakComment li:eq(0)").css("background-color","#b4a078");
				var a = "${havimg}";
				var b = "${five}";
				if(a != ""){
					$("#allspeakComment li:eq(1)").css("background-color","#b4a078");
					$("#allspeakComment li:eq(1)").siblings().css("background-color","#F5F3EF");
				}
				if(b != ""){
					$("#allspeakComment li:eq(2)").css("background-color","#b4a078");
					$("#allspeakComment li:eq(2)").siblings().css("background-color","#F5F3EF");
				}
				$("#allspeakComment li").click(function(){
					var spli = $("#allspeakComment li").index(this);
					$(this).css("background-color","#b4a078");
					$(this).siblings().css("background-color","#F5F3EF");
					$(".ping:eq("+spli+")").val($("#allspeakComment li:eq("+spli+") .mimi").html()).siblings().val("");
					$("#pageNo").val(1);
					 $("#form1").trigger("submit");
				})
				
				var sid = "${sid}";
				$.get("totComCount.shtml",{"sid":sid},function(data){
					data = eval("("+data+")");
					$("#allspeakCommentCount").html(data.totCountCom);
					$("#pictrueCommentCount").html(data.havimgCount);
					$("#fiveCommentCount").html(data.five);
				})
				
				
				var welldu = ((${wellSum})/(${totSum})*100).toFixed(2);
				$("#welldus").html(welldu+"%");	
				var xing = "";
				if(welldu >=80 && welldu <=100){
					for(var i = 0;i<5;i++){
						xing+="<img src='images/index/wellCommenty.png' width='15px' style='margin-left:8px;margin-top:6px;' />";
					}
				}
				if(welldu >=60 && welldu <80){
					for(var i = 0;i<4;i++){
						xing+="<img src='images/index/wellCommenty.png' width='15px' style='margin-left:10px;' />";
					}
				}
				if(welldu >=40 && welldu <  60){
					for(var i = 0;i<3;i++){
						xing+="<img src='images/index/wellCommenty.png' width='15px' style='margin-left:10px;' />";
					}
				}
				if(welldu >=20 && welldu <  40){
					for(var i = 0;i<2;i++){
						xing+="<img src='images/index/wellCommenty.png' width='15px' style='margin-left:10px;' />";
					}
				}
				if(welldu >0 && welldu <  20){
					for(var i = 0;i<1;i++){
						xing+="<img src='images/index/wellCommenty.png' width='15px' style='margin-left:10px;' />";
					}
				}
				$("#xingxing").append(xing);
				$(".details-line:last").remove();
				
				var width =225;
				var i=0;
				var pd=false;
				var pd1=false;
				var bigspeakWidth=(bigpeakCount*225)-(225*4);
				
				 
				$("#bigspeak-right").click(function() {
					if(width>=bigspeakWidth){
						width=bigspeakWidth;
						pd=true;
						/* return; */
					}
					pd=true;
					if(width<=0){
						width=width+225;
					}
					$("#big-speak").animate({
						"margin-left" : -width
					}, 800, function() {
						if(width>=bigspeakWidth){
							width=bigspeakWidth;
							alert("已经是最后一个商品评论信息了")
						}else{
							width=width+225;
						}
					});
				})
				$("#bigspeak-left").click(function() {
					if(width<=0){
						width=0;
					}
					if(width>0){
						if(pd){
							width=width-490;
						}else{
							width=width-225;
						}
							
					}
					if(width<=0){
						width=0;
					}
					$("#big-speak").animate({
						"margin-left" : -width
					}, 800, function() {
						pd=false;
					});
				})
				
	});
	
	
</script>
</head>
<body>
	<%@ include file="Header.jsp"%>
	<form action="addCart.shtml" id="form2">
	<div class="details-style-width" class="clear">
		<div class="details-style-width-ern"
			style="margin-top: 6px; padding-top: 20px; padding-bottom: 35px; box-sizing: border:box;"
			class="clear">
			<div>
				<div style="height: 25px;"></div>
				<div class="clear">
					<div class="left">
						<div
							style="width: 386px; border: 1px solid #e8e8e8; float: left; margin-right: 25px;">
							<c:forTokens items="${goodsType2.shangping.bigimg }" delims=","
								var="s">
								<p class="details-img1" style="display: none;">
									<img src="images/detali/${s }" width="100%" class="img5" />
								</p>
							</c:forTokens>
						</div>
						<div class="left">
							<c:forTokens items="${goodsType2.shangping.bigimg }" delims=","
								var="s">
								<p
									style="border: 1px solid #e8e8e8; width: 70px; margin-bottom: 10px; padding: 4px; box-sizing: border-box;"
									class="details-img2">
									<img src="images/detali/${s }" width="60px" class="img6" />
								</p>
							</c:forTokens>
						</div>
					</div>
					<div class="left" style="margin-left: 40px;">
						<div>
							<p style="font-size: 16px; font-family: inherit;">${goodsType2.shangping.shopname }</p>
							<p
								style="font-size: 12px; margin-top: 12px; font-family: inherit;">
								${goodsType2.shangping.jieshao }</p>
						</div>
						<div
							style="width: 380px; border: 1px dashed #e8e8e8; padding: 10px; box-sizing: border-box; background-color: rgba(230, 230, 230, 0.5); margin-top: 12px;"
							class="details-one">
							<p>
								<span>价格：</span> <span
									style="margin-left: 2px; color: red; letter-spacing: 0.1em; font-size: 16px;">￥${goodsType2.shangping.sjiage }</span>
								<span style="margin-left: 140px;">用户评论:</span> <span>${goodsType2.shangping.commentcount }</span>
							</p>
							<p style="margin-top: 10px;">
								<span>限制</span><span style="margin-left: 16px;">爱迪生噶还是地方阿斯蒂芬</span>
							</p>
							<p>
								<span>积分</span><span style="margin-left: 16px;">购买最高获得${goodsType2.shangping.jifen }积分</span>
							</p>
							<p style="border: 1px dashed #d3d1d1;"></p>
							<p>
								<span>服务</span><span style="margin-left: 16px;">撒地方撒地方</span>
							</p>
						</div>
						<div>
							<c:forTokens items="${goodsType2.typegg.tgname }" delims=","
								var="tgname" varStatus="tgnameid">

								<div style="width: 350px; margin-top: 10px;" class="clear">
									<div style="float: left; margin-top: 14px;">${tgname }</div>
									<div style="float: left; margin-left: 14px; width: 270px;">
										<c:if test="${tgname eq'尺码' }">
											<c:forTokens items="${goodsType2.spgvalues }" delims=","
												var="s" varStatus="sid">

												<p
													style="width: 120px; height: 25px; line-height: 25px; text-align: center; border: 1px solid #d8d8d8; float: left; margin-left: 10px; margin-top: 10px;" class="typeg">
													${s }</p>
											</c:forTokens>
										</c:if>
										<c:if test="${tgname eq'颜色' }">
											<c:forTokens items="${goodsType2.spgvalues2 }" delims=","
												var="ss">
												<p
													style="width: 50px; height: 50px; text-align: center; border: 1px solid #d8d8d8; float: left; margin-left: 10px; margin-top: 10px; background-color: #e8e8e8; padding: 4px; box-sizing: border-box;"
													class="details-img3">
													<img src="images/detali/${ss }" width="100%" class="img4" />
												</p>
											</c:forTokens>
										</c:if>
										
									</div>
								</div>
							</c:forTokens>
							<input type="hidden" name="carttypeg" id="carttypega" />
							<input type="hidden" name="sid" id="sid" value="${goodsType2.sid}" />
							<input type="hidden" name="cart_img" id="cart_img" />
							<!-- <div style="margin-top: 16px;" class="clear">
								<div style="float: left; margin-top: 25px;">颜色</div>
								<div style="float: left; margin-left: 14px; width: 270px;">
									<p
										style="width: 50px; height: 46px; text-align: center; border: 1px solid red; float: left; margin-left: 10px; margin-top: 10px;">

									</p>
								</div>
							</div> -->
							<div style="margin-top: 20px;">
								<span>数量</span><span style="margin-left: 16px;">
									<button
										style="padding: 6px; width: 30px; box-sizing: border-box; text-align: center;"
										id="jia" type="button">+</button> <input type="text" name="num" id="num"
									value="1"
									style="height: 25px; width: 45px; text-align: center; border-left: 0px; border-right: 0px; border-top: 1px solid #979797; border-bottom: 1px solid #979797" />
									<button
										style="padding: 6px; width: 30px; box-sizing: border-box; text-align: center;"
										id="jian" type="button">-</button>
								</span>
							</div>
							<div class="clear" style="margin-top: 16px;">
								<div
									style="width: 140px; border: 1px solid #c6b368; height: 40px; line-height: 40px; text-align: center; background-color: #f5f3ef; border-radius: 2px; float: left"
									class="goumai001">立即购买</div>
								<div>
									<div
										style="width: 140px; border: 1px solid #c6b368; height: 40px; line-height: 40px; text-align: center; background-color: #b4a078; border-radius: 2px; float: left; margin-left: 16px;" class="add_card">
										加入购物车</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div></div>
			<div></div>
		</div>
	</div>
	</form>
	
	
	<div style="width: 900px ;overflow:hidden;height: 250px;margin: 0px auto;margin-left:269px;position:relative;margin-bottom:30px;border:1px solid #E7E7E7;">
	<div style="height:34px;line-height:34px;padding-left:20px;background-color:#F4F4F4;font-size:14px;">猜你喜欢</div>
	<div id="big-speak" style="width: 9999999px;" class="clear">
	<c:forEach items="${listlove }" var="love">
	<div style="padding:10px;width:225px;box-sizing:border-box;float:left;margin-top:20px;" class="bigSpeak">
	<div style="text-align:center;">
	<div style="height:100px;margin-top:20px;">
	<img src="images/detali/${love.shopimage }" width="90px" height="90px" style="border-radius: 10px;" id="check" />
	</div>
	<div>
	${love.shopname }
	</div>
	<div style="margin-top:6px;margin-bottom:4px;color:red;">
	<span>￥</span><span>${love.sjiage }</span>
	</div>
	</div>
	</div>
	</c:forEach>
	</div>
	<div style="position: absolute; left: 10px; top: 125px;">
		<img src="images/index/left.png" id="bigspeak-left" />
	</div>
	<div style="position: absolute; right: 10px; top: 125px;">
		<img src="images/index/right.png" id="bigspeak-right" />
	</div>
	</div>
<!-- 	<div style="height: 600px;"></div> -->
	<!-- 详情展示与评论 -->
	<form action="good-details.shtml" method="post" id="form1">
	<div style="width: 980px ;height: 500px;margin: 0px auto;" class="clear">
	<div style="float:left;width:656px;">
	<div style="border: 1px solid #E7E7E7;width: 656px ;height: 35px;line-height:35px;" class="clear">
	<ul style="width: 656px ;height: 32px ;margin: 0px;float:left;" id="lists">
	<li class="detailsComment1">详情</li>
	<li class="detailsComment1">评价</li>
	</ul>
	</div>
	<input type="hidden" name="sid" id="" value="${sid }" />
	<div style="border: 1px solid #E7E7E7;width: 656px;border-top:none;">
	<div class="detailsComment2">
	<div id="divs1">
				<img alt="" src="images/detali/Kxiang1.gif" width="656px">
		</div>
	</div>
	<div class="detailsComment2">
		<div id="divs2" style="margin: 0px auto;width: 656px">
		<div style="width:100%;height:120px;border-bottom:1px dashed #eee;margin-bottom:20px;" class="clear">
		<div style="width:131px;text-align:center;float:left;margin-right:20px;border-right:1px solid #ddd;padding-top:20px;box-sizing:border-box;height:120px;">
		<div style="letter-spacing:4px;font-size:12px;color:#666;">
		好评率
		</div>
		<div id="welldus" style="color:#E36844;font-size:28px;margin-top:4px;margin-left:2px;">
		96.88%
		</div>
		<div id="xingxing" style="margin-left:-10px;margin-top:4px;">
		
		</div>
		</div>
		<input type="hidden" name="all" id="all" class="ping"  />
		<input type="hidden" name="havimg" id="havimg" class="ping" value="${havimg }" />
		<input type="hidden" name="five" id="five" class="ping" value="${five }" />
		<%-- <input type="text" name="huifu" id="huifu" class="ping" value="${huifu }" /> --%>
		<div style="float:left;margin-top:25px;">
		<div>大家都再说：</div>
		<div class="clear">
		<ul id="allspeakComment" class="clear" style="margin-top:10px;margin-left:45px;">
			<li><span class="mimi">全部</span><span>( </span><span id="allspeakCommentCount"></span><span> )</span></li>
			<li><span class="mimi">有图</span><span>( </span><span id="pictrueCommentCount"></span><span> )</span></li>
			<li><span class="mimi">五星</span><span style="color:#ecd033;font-size:12px;">★</span><span>( </span><span id="fiveCommentCount"></span><span> )</span></li>
		<!-- 	<li><span class="mimi">回复</span><span>( </span><span id="huifu"></span><span> )</span></li> -->
		</ul>
		<div>
		
		</div>
		</div>
		</div>
		</div>
		<c:forEach items="${comments }" var="comment">
		<div>
		<!-- <p style="line-height: 60px;height: 10px"></p> -->
		<ul id="listo" class="clear" class="list">
		<li style="margin: 20px auto;text-align: center;width:130px;"><%-- ./images/index/${comment.yonghu.toimg } --%>
		<div><img alt="" src="images/index/${comment.yonghu.toimg }" width="70px" style="border-radius: 50%;"></div>
		<div style="margin-top:12px;">${comment.yonghu.namesp }</div>
		</li>
		<li id="lisaa">
		<div>
				<c:forEach begin="1" end="${comment.com_praise }" var="a">
								<img src="images/index/wellCommenty.png" width="15px" />
								</c:forEach>
		</div>
	
		<div style=" font-size: 13px;">${comment.com_content }</div>
		<div><img src="images/index/${comment.com_images }" width="110px"></div>
		<div>日期：${comment.com_date }</div>
		
		<c:forEach items="${comment.reply }" var="reply">
		<div style=" padding-top:10px;box-sizing:border-box;;width: 500px ;background-color: #F4F4F4;color: #989898" >
		<p style="line-height: 20px;width: 477px">${reply.hnamesp } 回复:</p>
		<p style="width: 477px;line-height: 15px">${reply.rtext }</p>
				<p>&nbsp;</p>
		</div>
		</c:forEach>
		</li>
		</ul>
		<p class="clear"></p>
		<p style="height: 10px"></p>
		<p style="border-bottom: 1px dashed #E9E9E9;width: 620px;margin-top: 0px" class="detilsline"></p>
		</div>
		</c:forEach>
		</div>
		<input type="hidden" name="pinglun" id="pinglun" value="pp" />
		<div style="margin-top: 20px;margin-bottom:20px;">
		<w:page pageBeandetails="${pageBeandetails }"/>
		</div>
	</div>
	</div>
	</div>
	<div style="float:left;margin-left:10px;width:235px;padding-bottom:10px;box-sizing:border-box;border:1px solid #E7E7E7;">
	<div style="border-bottom:1px solid #e7e7e7;height:35px;line-height:35px;text-align:center;background-color:#F4F4F4;font-size:14px;">24小时热销榜</div>
	<c:forEach items="${listshot }" var="shot">
	<div style="padding:10px;box-sizing:border-box;">
	<div style="text-align:center;">
	<div style="height:100px;margin-top:20px;">
	<img src="images/detali/${shot.shopimage }" width="90px" height="90px" style="border-radius: 10px;" id="check" />
	</div>
	<div>
	${shot.shopname }
	</div>
	<div style="margin-top:6px;margin-bottom:4px;color:red;">
	<span>￥</span><span>${shot.sjiage }</span>
	</div>
	</div>
	<div style="border-bottom:1px dashed #eee;margin-top:10px;" class="details-line">
	
	</div>
	</div>
	
	</c:forEach>
	</div>
	</div>
	</form>
</body>
</html>